<template>
  <div class="page-content">
    <hmyTable
      ref="tableRef"
      :pageData="pageData"
      :pageListTotal="pageListTotal"
      :pagination-layout="useMainStore().layoutConfig.shrink"
      v-bind="pageContentConfig"
      @sizeChange="handleSizeChage"
      @currentChange="handleCurrentChage"
      :loading="pageContentStore.loading"
    >
      <template #headBtnSlot>
        <div style="display: flex; align-items: center">
          <el-button v-if="isCreate" type="primary" @click="emitCreateData"
            >新建数据</el-button
          >
          <el-button v-if="isDelete" type="danger" :icon="Delete"
            >删除</el-button
          >

          <template v-if="pageContentConfig.childrenPropos">
            <el-button v-if="!isExpand" type="success" @click="onExpand"
              >展开所有</el-button
            >
            <el-button v-else-if="isExpand" type="warning" @click="onExpand"
              >收缩所有</el-button
            >
          </template>

          <div class="table-search-button-group">
            <el-dropdown :max-height="380" :hide-on-click="false">
              <el-button class="table-search-button-item" color="#dcdfe6" plain>
                <el-icon color="#000"><Grid /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="(item, idx) in pageContentConfig.propList"
                    :key="idx"
                  >
                    <el-checkbox
                      :checked="!item.show"
                      :model-value="!item.show"
                      @change="emitChangePropListShow(idx, $event)"
                      size="small"
                      :label="item.label"
                    />
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </template>

      <template #tagSlot="scope">
        <el-tag>{{ scope.row['ip'] }}</el-tag>
      </template>

      <template #imageSlot="scope">
        <el-image
          class="image"
          style="width: 100px; height: 100px"
          :src="scope.row['imgUrl']"
          :preview-src-list="[scope.row['imgUrl']]"
          :hide-on-click-modal="true"
          :preview-teleported="true"
          :zoom-rate="1.2"
          fit="cover"
      /></template>
      <template #iconSlot="scope">
        <el-icon>
          <component :is="scope.row['icon']?.split('-icon-')[1]" />
        </el-icon>
      </template>
      <template #enableSlot="scope">
        <el-switch
          v-model="scope.row['enable']"
          :loading="useMainStore().showLoading"
          :active-value="1"
          :inactive-value="0"
          @click="onSwitch(scope.row['enable'], scope.row['id'])"
        />
      </template>
      <template #typeSlot="scope">
        <el-tag
          class="ml-2"
          :type="
            scope.row['type'] === 1
              ? 'danger'
              : scope.row['type'] === 2
              ? 'success'
              : 'info'
          "
          >{{
            scope.row['type'] === 1
              ? '菜单目录'
              : scope.row['type'] === 2
              ? '菜单项'
              : '按钮权限'
          }}</el-tag
        >
      </template>
      <template #createAt="scope">
        <span>{{ formatUtcString(scope.row['createAt']) }}</span>
      </template>
      <template #updateAt="scope">
        <span>{{ formatUtcString(scope.row['updateAt']) }}</span>
      </template>
      <template #btnSlot="scope">
        <el-button
          v-if="isUpdate"
          class="btn"
          size="small"
          @click="emitEdit(scope.row)"
          :icon="Edit"
        ></el-button>

        <el-popconfirm
          title="确定删除选中记录?"
          @confirm="handleDelete(scope.row)"
          v-if="isDelete"
        >
          <template #reference>
            <el-button
              class="btn"
              size="small"
              type="danger"
              :icon="Delete"
            ></el-button>
          </template>
        </el-popconfirm>
      </template>
    </hmyTable>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import usePermission from '@/hooks/usePermission'
import usePageContentStore from '@/stores/page-content/page-content'
import useMainStore from '@/stores/main/main'
import { Delete, Edit } from '@element-plus/icons-vue'
import { formatUtcString } from '@/utils/date-format'

import hmyTable from '@/base-ui/table'

interface IPageContentProps {
  pageContentConfig: any
}
const pageContentStore = usePageContentStore()
const props = defineProps<IPageContentProps>()
const pageName = ref(props.pageContentConfig.pageName)
// const pageInfo = pageContentStore.getPageInfoByPageNameAction(pageName.value),不能写在一个变量因为执行getpagedata引用赋值丢失响应式

// 刷新的时候初始化一下,因为会保存上个页面的数据
pageContentStore.setPageInfoByPageNameAction(pageName.value, 'offset', 0)
pageContentStore.setPageInfoByPageNameAction(pageName.value, 'size', 10)

// 为什么要这样子调用呢为了父组件的可共用性，父组件直接ref实例调用这个方法方便传搜索过来的参数好调用,为什么这里不直接用声明式函数呢因为函数提升所以defineexpose可以放在最前面，不然只能放在最后面很丑
const getPageData = (queryInfo?: any) => {
  pageContentStore.getPageListAction(props.pageContentConfig.pageName, {
    offset:
      pageContentStore.getPageInfoByPageNameAction(pageName.value).offset *
      pageContentStore.getPageInfoByPageNameAction(pageName.value).size,
    size: pageContentStore.getPageInfoByPageNameAction(pageName.value).size,
    ...queryInfo
  })
}
getPageData()

const pageData = computed(
  () =>
    pageContentStore.getPageInfoByPageNameAction(pageName.value).pageContenList
)
const pageListTotal = computed(
  () =>
    pageContentStore.getPageInfoByPageNameAction(pageName.value).pageListTotal
)

const emits = defineEmits(['createData', 'edit', 'changePropListShow'])
// 编辑和删除发送出去,在主页面控制弹窗和回显
const emitEdit = (row: any) => {
  emits('edit', row)
}
const emitCreateData = () => {
  emits('createData')
}

//发送控制展示table列,
const emitChangePropListShow = (
  index: number,
  value: string | number | boolean
) => {
  console.log(index)
  console.log(value)
  emits('changePropListShow', index, value)
}

const handleDelete = (row: any) => {
  pageContentStore.deleteListAction(props.pageContentConfig.pageName, row.id)
}

const handleCurrentChage = (e: any) => {
  pageContentStore.setPageInfoByPageNameAction(pageName.value, 'offset', e - 1)
  getPageData()
}

const handleSizeChage = (e: any) => {
  pageContentStore.setPageInfoByPageNameAction(pageName.value, 'size', e)
  getPageData()
}

//是否禁用状态的开关
const onSwitch = (e: any, id: number) => {
  if (id) {
    pageContentStore.editAction(
      props.pageContentConfig.pageName,
      { enable: e },
      id
    )
  }
}

// 查看是否有增删查改权限
const isCreate = usePermission(`${props.pageContentConfig.pageName}:create`)
const isDelete = usePermission(`${props.pageContentConfig.pageName}:delete`)
const isUpdate = usePermission(`${props.pageContentConfig.pageName}:update`)

const tableRef = ref<InstanceType<typeof hmyTable>>()
const isExpand = ref(false)
tableRef.value?.isExpandAll(isExpand.value)

// 展开树形结构
const onExpand = () => {
  isExpand.value = !isExpand.value
  tableRef.value?.isExpandAll(isExpand.value)
}
defineExpose({ getPageData })
</script>

<style lang="less" scoped>
.btn {
  width: 24px;
  height: 24px;
}

.table-search-button-group {
  display: flex;
  margin-left: 12px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  overflow: hidden;
  button:focus,
  button:active {
    background-color: var(--ba-bg-color-overlay);
  }
  button:hover {
    background-color: var(--el-color-info-light-7);
  }
  .table-search-button-item {
    height: 30px;
    border: none;
    border-radius: 0;
  }
  .el-button + .el-button {
    margin: 0;
  }
  .right-border {
    border-right: 1px solid var(--el-border-color);
  }
}

html.dark {
  .table-search-button-group {
    button:focus,
    button:active {
      background-color: var(--el-color-info-dark-2);
    }
    button:hover {
      background-color: var(--el-color-info-light-7);
    }
    button {
      background-color: #898a8d;
      el-icon {
        color: white !important;
      }
    }
  }
}
</style>
